<template>
    <el-dialog :model-value="props.visible" title="下半成品订单" @close="handleClose" width="30%">
        <el-form :model="orderFormData" ref="orderFormRef">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="半成品名称">
                        <span class="product-info">{{ props.data.specsDetail }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交货日期" prop="deliveryDate">
                        <el-date-picker v-model="orderFormData.deliveryDate" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="年/月/日" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="7">
                    <el-form-item label="纸张类型">
                        <span class="product-info">{{ paperTypes.filter((item:any)=>item.subclassType == props.constituteInfo.paperType)[0]?.subclassName }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="克重">
                        <span class="product-info">{{ `${props.constituteInfo?.weight} g` }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="长">
                        <span class="product-info">{{ `${props.constituteInfo?.length} mm` }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="宽">
                        <span class="product-info">{{ `${props.constituteInfo?.width} mm` }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="刀版编号">
                        <span class="product-info">{{ props.knifeModels.filter((item:any)=>item.id == props.constituteInfo.knifeId)[0]?.knifeName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="6">
                    <el-form-item label="能切套数">
                        <span class="product-info">{{ props.constituteInfo?.numberOfSets }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="生产工序" prop="processOrder">
                <div class="flex gap-3">
                    <el-tag v-for="item in props.constituteInfo.productJoinWorks" :key="item.workProcedureId" size="large">
                        {{ item.workName }}
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label="生产数量" prop="produceNumber">
                <el-input-number v-model="orderFormData.produceNumber" placeholder="请输入"></el-input-number>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="orderFormData.remark" type="textarea" placeholder="请输入" maxlength="128" show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { orderSemiProductApi } from '@/api/sj/warehouse/productInventory';
import { getSingleByTotalApi } from '@/api/sj/warehouse/typeManagement';

const props = defineProps(['visible','paper','data','processes','constituteInfo','knifeModels']);
const emits = defineEmits(['close','submit']);
const orderFormRef = ref<FormInstance>();
interface orderFormDataVO{
    deliveryDate?: string;
    produceNumber?: number;
    remark?: string;
}
const orderFormData = ref<orderFormDataVO>({
    deliveryDate:undefined,
    produceNumber: undefined,
    remark: undefined
});
//纸张类型大类(外协库)
const assistType = 'auxiliary_material_assist';
const paperTypes = ref<any[]>([]);

const preparedProductInfo = ref({
    productName: undefined,
    paperType: '白卡纸',
    weight: 300,
    length: 800,
    width: 400,
    knifeModel:'金皇冠刀版001',
    cuttingNumber: 1,
    existedProcess: [
        {id:1, processName: '印刷'},
        {id:2, processName: '覆膜'},
        {id:3, processName: 'UV'},
        {id:4, processName: '冷烫'},
        {id:5, processName: '模切'},
    ]
});

/** 获取纸张类型 */
watch(()=>props.visible, async (visible)=>{
    console.log(visible);
    if(visible){
        const {code, data} = await getSingleByTotalApi(assistType);
        if(code == 200){
            paperTypes.value = data;
        };
        console.log('paperTypes', paperTypes.value);
    };
},{deep: true});

watch(()=>props.data,()=>{
    preparedProductInfo.value.productName = props.data.productName;
});

// watch(orderFormData.value,()=>{
//     console.log(orderFormData.value)
// },{deep:true});

const handleSubmit = async () => {
    const submitData = {
        ...orderFormData.value,
        semiId: props.data.id
    }
    const {code} = await orderSemiProductApi(submitData);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }
};

const handleClose = ()=>{
    emits('close');
    orderFormRef.value?.resetFields();
};
</script>

<style scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>